<template>
  <div style="display: initial;">
    <!-- <span style="font-size:24px;color:#ffffff">{{title}}</span> -->
    <div :class="wrpCls">
      <span style="padding-right:20px;cursor:pointer;font-size:14px;color:#ffffff">欢迎您：<a-avatar size="small" icon="user" :src="profilePictureSrc" />  {{currentUser.empName}}</span>

      <span @click="goToBigScreen" style="padding-right:20px;cursor:pointer;font-size:14px;color:#ffffff"><a-icon type="pie-chart" /> 大屏展示</span>
      <!-- <span @click='handleMessage' style="padding-right:20px;cursor:pointer;font-size:14px;color:#ffffff"><a-badge :count="messageCount"><a-icon type="message" />系统消息</a-badge></span> -->
      <!-- 
      <span @click='handleTodoRenwu' style="padding-right:20px;cursor:pointer;font-size:14px;color:#ffffff"><a-badge :count="rewuCount"><a-icon type="book" />待办任务</a-badge></span> -->

      <span @click='handleTodoTask' style="padding-right:20px;cursor:pointer;font-size:14px;color:#ffffff"><a-badge :count="taskCount"><a-icon type="highlight" />待审批</a-badge></span>
      <span @click="handleEdit({},'ChangePwd','修改密码')" style="padding-right:20px;cursor:pointer;font-size:14px;color:#ffffff"><a-icon type="unlock" /> 修改密码</span>
      
      <span @click="handleToSettings" style="padding-right:20px;cursor:pointer;font-size:14px;color:#ffffff"><a-icon type="skin" />更换主题</span>
      <span @click="handleLogout" style="cursor:pointer;font-size:14px;color:#ffffff;padding-right:20px;"><a-icon type="poweroff" /> 退出登录</span>
   
      <!--
      <avatar-dropdown @handleToSettings="handleToSettings" :menu="showMenu"  :class="prefixCls" />
     -->
      <!--语言设置
      <select-lang :class="prefixCls" />
      -->
    </div>

    <ChangePwd ref="ChangePwd"></ChangePwd>
  </div>
  
</template>

<script>
import { Modal } from 'ant-design-vue'
import AvatarDropdown from './AvatarDropdown'
import ChangePwd from './ChangePwd'
import defaultSettings from '@/config/defaultSettings'
import {SysMixin} from '@/mixins/SysMixin'
import notification from 'ant-design-vue/es/notification'

export default {
  name: 'RightContent',
  components: {
    AvatarDropdown,
    ChangePwd
  },
  mixins:[SysMixin],
  props: {
    prefixCls: {
      type: String,
      default: 'ant-pro-global-header-index-action'
    },
    isMobile: {
      type: Boolean,
      default: () => false
    },
    topMenu: {
      type: Boolean,
      required: true
    },
    theme: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      profilePictureSrc:'',
      showMenu: true,
      profilePictureSrc:'',
      currentUser:{},
      title:'',
      messageCount:0,
      taskCount:0,
    }
  },
  computed: {
    wrpCls () {
      return {
        'ant-pro-global-header-index-right': true,
        [`ant-pro-global-header-index-${(this.isMobile || !this.topMenu) ? 'light' : this.theme}`]: true
      }
    }
  },
 mounted(){
    this.$nextTick(() => {
      this.title = defaultSettings.title
      this.currentUser = this.$store.state.user.info
      if(this.currentUser.profilePicture){
        this.profilePictureSrc=defaultSettings.fileServer+"/"+this.currentUser.profilePicture
      }

      if ('WebSocket' in window) {
          this.initWebsocket()
      } else {
          notification.error({ message: '系统提示', description: "Not support websocket"})
      }
      

    })
    
  },
  methods:{
    initWebsocket() {
         let that = this
        if (defaultSettings.websocket) {
            let that = this;
            that.websocket = new WebSocket(defaultSettings.websocket)
            //连接发生错误的回调方法
            that.websocket.onerror = function(event,a,b) {
                console && console.log("-----------error-----------")
            }

            //连接成功建立的回调方法
            that.websocket.onopen = function(event) {
                console && console.log("-----------open connected:-----------" + defaultSettings.websocket)
                let request = {}
                request.empNo = that.$store.state.user.info.empNo
                that.websocket.send(JSON.stringify(request));
            }

            //连接关闭的回调方法
            that.websocket.onclose = function() {
                console && console.log("-----------close-----------")
                setTimeout(function() {
                  console && console.log("正在重连，当前时间" + new Date())
                  that.initWebsocket()
                }, 5000)
            }

            //接收到消息的回调方法
            that.websocket.onmessage = function(event) {
               
                let data = null
                if(event.data){
                    data = JSON.parse(event.data)
                }
                if(!data){
                    return false
                }
                if(defaultSettings.常量.websocket待审批数量==data.type){
                    that.taskCount=data.data
                }else if(defaultSettings.常量.websocket库存预警==data.type){
                    notification['warning']({ 
                        message: h=>{return h('div',{style:'margin-bottom:10px'},'库存预警提醒')}, 
                        description: data.data,
                        placement:'bottomRight',
                        btn: h => {
                            return h(
                                'a-button',
                                {
                                
                                    props: {
                                        type: 'primary',
                                        size: 'small',
                                    },
                                    on: {
                                        click: () => that.handleTodoWzAlertNumber(),
                                    },
                                },
                                '查看详情',
                            )
                        }
                    })
                }else if(defaultSettings.常量.websocket轮式装备合同到期提醒==data.type){
                    notification['warning']({ 
                        message: h=>{return h('div',{style:'margin-bottom:10px'},'合同到期提醒')}, 
                        description: data.data,
                        placement:'bottomRight',
                    })
                }
            
               
            }

            //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
            window.onbeforeunload = function() {
                that.websocket && that.websocket.close();
            }
        }
    },
    handleMessage() {
      
    },
    handleToSettings(){
      this.$emit('handleToSettings');
    },
    handleLogout (e) {
      let that = this
      Modal.confirm({
        title: this.$t('layouts.usermenu.dialog.title'),
        content: this.$t('layouts.usermenu.dialog.content'),
        onOk: () => {
         return this.$store.dispatch('Logout').then(() => {
            // that.$router.push({ path: '/user/login'})
            // location.reload()
            window.location.href = '/user/login'
          })
         
          
        },
        onCancel () {}
      })
    },
    handleTodoTask(){
        
      this.$router.push({ path: '/system/codeGenerator/ExtPage/1822548542448955393'})
    },
    handleTodoRenwu(){
        
      this.$router.push({ path: '/sc/office/task/todoTaskInfoList'})
    },
   goToBigScreen(){
        let routeData = this.$router.resolve({
            path: "/bigScreen",
        });
        window.open(routeData.href, "_blank");
    },
    handleTodoWzAlertNumber(){
        this.$router.push({path:'/system/codeGenerator/ExtPage/1770255779510874114'})
    }
  }
}
</script>

<style lang="less" scoped>
//notification 样式
    ::v-deep .ant-notification-notice {
        background:var(--primary-color) !important;
    }
</style>
